<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<html>
<head>
    <script type="text/javascript">
        function f1() {
            console.log($('input:first').attr('address'))
            console.log($('input:first').attr('address','nanjing'))
            console.log($('input:first').attr('address'))
            console.log($('input:first').removeAttr('address'))
        }
        function f2() {
            var json = {class:'xxxx',name:'mmm',id:'bbb',address:'nanjing',value:'www'}
            $('#aaa').attr(json)
        }
        function f3() {
            $('#aaa').attr('value',function () {
                return 2222
            })
        }
        //给class设定和追加属性值
        function f4() {
            $('div').attr('class','apple')
            $('div').addClass('pear')
            $('div').addClass('bananer')

        }
        function f5() {
            $('div').removeClass('apple')

        }
        function f6() {
            $('div').toggleClass('apple')

        }
    </script>
    <style type="text/css">
        .apple{margin: 20px;width: 300px;height: 300px;background-color: antiquewhite}
        .pear{color: aqua}
        .bananer{font-size:30px; }
    </style>
</head>
<body>
    <h2>属性操作</h2>
    <input type="text" address='beijing'>
    <input type="text" id="aaa" name="nnn" value="vvv" class="ccc" address='beijing'>
    <input type="button" onclick="f1()" value="获取">
    <input type="button" onclick="f2()" value="批量修改多个属性">
    <input type="button" onclick="f3()" value="用函数修改">
    <div>今天是个好日子</div>
    <input type="button" onclick="f4()" value="设置class">
    <input type="button" onclick="f5()" value="删除class">
    <input type="button" onclick="f6()" value="切换class">

</body>
</html>
